<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(route, index) in breadcrumbRoutes" :key="index" :to="{ path: route.path }">
      {{ route.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router';

// 声明路由记录类型，包含路径和名称
type BreadcrumbRoute = {
  name: string;
};

const currentRoute = useRoute();

// 使用计算属性获取面包屑路由数组
const breadcrumbRoutes = computed<BreadcrumbRoute[]>(() => {
  const matchedRoutes = currentRoute.matched;

  // 遍历所有匹配的路由记录，提取路由的名称作为面包屑的标题
  return matchedRoutes.map((route) => {
    return { name: route.name };
  });
});
</script>
